<template>
	<view class="content">
		<view class="top-menu r-nw-sa-c">
			<view class="item c-c-c" v-for="item in menus" :key="item.id" @click="changeMenu(item.id)">
				<view class="title" :style="{'color': item.id === currentMenu ? '#EC2F12' : ''}">{{item.title}}</view>
				<image style="width: 32rpx;height: 12rpx;" v-if="item.id === currentMenu" src="../../static/image/icon1.png" mode="aspectFit"></image>
				<view style="width: 32rpx;height: 12rpx;" v-else></view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll" @scrolltolower="scrolltolower">
			<view v-if="orderList.length > 0">
				<view class="order-item" v-for="(item, index) in orderList" :key="item.id">
					<view class="order-item-status r-nw-sb-c">
						<text>下单时间：{{item.date}}</text>
						<text class="statu" :style="{'color': statusColor[item.status]}">
							{{staus[item.status]}}
						</text>
					</view>
					<view class="title">{{item.order_car.name}}</view>
					<view class="config">{{item.order_car.describe}}</view>
					<view class="times-total-num r-nw-fs-c">
						<view class="times">
							<view class="pickUpTime time">取车时间：{{item.start_date}}</view>
							<view class="retunrTime time">还车时间：{{item.end_date}}</view>
						</view>
						<view class="total-num-box">
							<view class="overlay"></view>
							<view class="total-num c-c-c">
								共{{item.day}}天
							</view>
						</view>
					</view>
					<view class="price-btns r-nw-sb-c">
						<view class="price">
							￥{{item.total_price}}
						</view>
						<view class="btns r-nw-fe-c">
							<view class="btn-details btn c-c-c" @click="goToDetail(item.id)">
								查看详情
							</view>
							<button class="btn-payment btn r-nw-c-c" :loading="item.payLoading" v-if="item.status === 0"  style="margin-left: 20rpx;padding: 0;background-color: #fff" @click="goToPay(item, index)">
								立即支付
							</button>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="none-data">
				暂无数据
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { STATUS, STATUSCOLORS } from "@/utils/constants.js";
	import { ordersList, orderDetail, payParameter } from "@/utils/api.js"
	import { throttle } from "@/utils/public";
	export default {
		data() {
			return {
				// 待支付:0;进行中:1;已完成:2;全部:3
				menus: [
					{
						id: 0,
						title: '全部订单'
					},
					{
						id: 1,
						title: '待支付'
					},
					{
						id: 2,
						title: '进行中'
					},
					{
						id: 3,
						title: '已完成'
					},
				],
				currentMenu: 0,
				// 待支付:0;进行中（交车前）:1;进行中（交车后）:3;已完成(交车后):2;
				currentPage: 1,
				orderList: [],
				start_at: '',
				end_at: '',
				channel_id: '',
				city: '',
				staus: {},
				statusColor: {}
			}
		},
		onLoad() {
			this.staus =  STATUS;
			this.statusColor = STATUSCOLORS;
		},
		onShow() {
			let token = '';
			token = uni.getStorageSync("access_token");
			let isAuthBack =  uni.getStorageSync("is-auth-back");
			uni.removeStorageSync("is-auth-back");
			if(token) {
				this.changeMenu(uni.getStorageSync('currentOrderMenu') || 0);
			} else if(!isAuthBack) {
				uni.setStorageSync('path', '/pages/order/order');
				uni.showModal({
					content: '您还没有登录授权',
					cancelText: "取消", // 取消按钮的文字
					confirmText: "去授权", // 确认按钮的文字
					confirmColor: '#FF5C1F',
					success: (res) => {
						if(res.confirm) {
							uni.navigateTo({
								url: '/pages/auth/auth'
							})
						}else if(res.cancel) {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}
					}
				})
			}else {}
		},
		onHide() {
			uni.setStorageSync('currentOrderMenu', 0);
		},
		onReachBottom() {
			// this.currentPage++;
			// this.goToList();
		},
		methods: {
			scrolltolower() {
				this.currentPage++;
				this.goToList();
			},
			// 获取列表
			goToList() {
				let data = {
					status: this.currentMenu,
					page: this.currentPage
				}
				uni.showLoading({
					title: '加载中...'
				})
				ordersList(data).then(res => {
					if(res.code === 200) {
						if(res.data.list.length > 0) {
							res.data.list.forEach(item => {
								item.payLoading = false
							})
							this.currentPage = res.data.current_page;
							this.orderList = this.orderList.concat(res.data.list);
						} else {
							this.currentPage = res.data.current_page - 1;
						}
						uni.hideLoading({});
					}
				})
			},
			goToDetail(id) {
				uni.navigateTo({
					url:'/pages/order/orderDetail?id=' + id
				})
			},
			// 切换菜单
			changeMenu(id) {
				// 待支付:0;进行中:1;已完成:2;全部:3
				uni.setStorageSync('currentOrderMenu',id);  
				this.currentMenu = id;
				this.currentPage = 1;
				this.orderList = [];
				this.goToList();
			},
			// 立即支付
			goToPay (item, index) {
				// 循环订单列表，预防多个订单一起提交				let arr = this.orderList.filter(item => item.payLoading);
				if(arr.length === 0) {
					item.payLoading = true;				} else if(arr.length === 1) {
					if(item.payLoading) {
						uni.showToast({
							icon: 'none',
							title: '请勿重复提交'
						})
					}
					return;
				} else if(arr.length > 1){
					uni.showToast({
						icon: 'none',
						title: '请先完成上一个订单支付'
					})
					return;
				}				// 获取支付参数
				payParameter(item.id).then(res => {
					if(res.code === 200) {
						item.payLoading = false;
						let paymentData = res.data;
						uni.requestPayment({
							provider: 'wxpay',//wxpay微信 alipay支付宝
							timeStamp: paymentData.timeStamp,
							nonceStr: paymentData.nonceStr,
							package: paymentData.package,
							signType: paymentData.signType,
							paySign: paymentData.paySign,
							success: function(res) {
								uni.showToast({title: '支付成功', icon: 'none'});
								setTimeout(() => {
									this.changeMenu(0);
								}, 500)
							},
							// 参数有问题则抛出错误
							fail: function(err) {
								uni.showToast({title: '支付失败', icon: 'none'})
							},
						})
					}
				})
				setTimeout(() => {
					item.payLoading = false;
				}, 2000)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F6F8;
	}
	.scroll {
		margin-top: 112rpx;
		height: 90vh;
		padding-bottom: 30rpx;
	}
	.top-menu {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		width: 750rpx;
		height: 88rpx;
		background: #FFFFFF;
		margin-bottom: 4rpx;
		.title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			line-height: 28rpx;
			margin-bottom: 9rpx;
		}
	}
	.order-item {
		margin: 20rpx auto 0;
		padding: 24rpx;
		width: 638rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
	}
	.order-item-status {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #999999;
		line-height: 40rpx;
		.statu {
			font-weight: 500;
			color: #FF5C1F;
		}
	}
	.title {
		margin-top: 24rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 32rpx;
		color: #333333;
	}
	.config {
		margin-top: 16rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		line-height: 32rpx;
	}
	.times-total-num {
		margin-top: 32rpx;
		.time {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			line-height: 40rpx;
		}
		.retunrTime {
			margin-top: 24rpx;
		}
		.total-num-box {
			margin-left: 16rpx;
			position: relative;
			width: 157rpx;
			height: 70rpx;
			border: 1rpx dashed #979797;
			border-radius: 30rpx;
			border-left: 0;
			.overlay {
				position: absolute;
				left: -12rpx;
				top: -5px;
				width: 34rpx;
				height: 85rpx;
				background-color: #FFFFFF;
			}
			.total-num {
				position: absolute;
				right: -42rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 92rpx;
				height: 32rpx;
				background: #F5F6F8;
				border-radius: 16rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #666666;
				line-height: 28rpx;
			}
		}
	}
	.price-btns {
		margin-top: 32rpx;
		.price {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #333333;
			line-height: 24rpx;
		}
		.btns {
			.btn {
				width: 160rpx;
				height: 60rpx;
				border-radius: 30rpx;
				border: 2rpx solid #EC2F12;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FF0E25;
				line-height: 28rpx;
			}
			.btn-details {
				border: 2rpx solid #999999;
				color: #666666;
			}
		}
	}
</style>
